﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {

    interface ICircleCellTypeParam {
        DefaultValue: any;
        text: string;
        color: string;
        layerColor: string;
        fill: string;
        size: number;
        strokeWidth: number;
        speed: number;
        strokeLinecap: "round" | "square" | "butt";
        startPosition: "top" | "bottom" | "left" | "right";
        clockwise: number;
    }

    export class CircleCellType extends VantCellTypeBase<ICircleCellTypeParam> {
        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            const cellType = this.cellType;
            const option = {
                template: `
<van-circle
:text="text"
v-model:current-rate="currentRate"
:rate="rate"
:color="color"
:layer-color="layerColor"
:fill="fill"
:size="size" 
:speed="speed" 
:strokeLinecap="strokeLinecap" 
:startPosition="startPosition" 
:clockwise="clockwise" 
:strokeWidth="strokeWidth" />`,
                data() {
                    return {
                        text: " ",
                        currentRate: 0,
                        rate: 0,
                        color: Forguncy.ConvertToCssColor(cellType.color),
                        layerColor: Forguncy.ConvertToCssColor(cellType.layerColor),
                        fill: Forguncy.ConvertToCssColor(cellType.fill),
                        size: cellType.size,
                        speed: cellType.speed,
                        strokeLinecap: cellType.strokeLinecap,
                        startPosition: cellType.startPosition,
                        clockwise: !!cellType.clockwise,
                        strokeWidth: cellType.strokeWidth * 1000 / cellType.size
                    };
                },
                methods: {
                    getValue() {
                        return this.rate;
                    },
                    setValue(value) {
                        if (!value) {
                            value = 0;
                        }
                        const rate = Number(value);
                        if (!isNaN(rate)) {
                            this.rate = rate;
                            this.text = self.getText();
                        }
                    }
                },
                mounted() {
                    self.fontDom = $(this.$el).find(".van-circle__text");
                }
            };

            this.createVueApp(option);

            this.onDependenceCellValueChanged(() => {
                if (this.isFormula(cellType.text)) {
                    this.vue.text = this.getText();
                }
            });

            this.vue.text = this.getText();

            super.onPageLoaded(info);
        }

        private getText(): any {
            const { text } = this.cellType;
            if (!text) {
                return this.vue.rate.toFixed(0) + "%";
            }
            const result = this.evaluateFormula(text)?.toString();
            if (!result) {
                return " ";
            }
            return result;
        }

        public clickable() {
            return false;
        }

        public ChangeCircleProgressStatus(text: string, color: string, fill: string) {
            if (!this.isEmpty(text)) {
                this.vue.text = text;
            }
            if (!this.isEmpty(color)) {
                this.vue.color = Forguncy.ConvertToCssColor(color);
            }
            if (!this.isEmpty(fill)) {
                this.vue.fill = Forguncy.ConvertToCssColor(fill);
            }
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.Circle, Vant", VantCellTypes.CircleCellType);